<template>
  <div class="content">
    <van-nav-bar
      @click-left="$router.push('/index')"
      left-arrow
      title="海报"
      fixed
    >
      ></van-nav-bar
    >

    <main>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiperArr" :key="index">
          <a :href="item.linkUrl">
            <img :src="$publicObj.urlImg(item.url)" alt="" />
          </a>
        </van-swipe-item>
      </van-swipe>
      <div class="task">
        <div class="item" @click="$router.push('/publishPost?msg=1')">
          <img src="../../assets/images/detail/tuiguang.png" alt="" />
          <h4>海报推广</h4>
        </div>
        <div class="item" @click="goPush">
          <img src="../../assets/images/detail/fabu.png" alt="" />
          <h4>发布海报</h4>
        </div>
      </div>
      <h3>
        <img src="../../assets/images/detail/head.png" alt="" />
        海报统计
      </h3>
      <div class="info">
        <div class="item">
          <h4>海报资源总数</h4>
          <p>
            {{ tasks.publishSum || 0 }}
            <span>篇</span>
          </p>
        </div>
        <div class="item">
          <h4>剩余赏金</h4>
          <p>{{ tasks.moneyReward || 0 }} <span>元</span></p>
        </div>
        <div class="item">
          <h4>已发出赏金</h4>
          <p>{{ tasks.transmit || 0 }}<span>元</span></p>
        </div>
      </div>

      <div class="poster_type">
        <ul>
          <li :class="{ active: type == 1 }" @click="setType(1)">
            平台赏金海报
            <i></i>
          </li>
          <li :class="{ active: type == 2 }" @click="setType(2)">
            内部推广海报
            <i></i>
          </li>
          <li :class="{ active: type == 3 }" @click="setType(3)">
            团队免费海报
            <i></i>
          </li>
          <li :class="{ active: type == 4 }" @click="setType(4)">
            团队推广海报
            <i></i>
          </li>
        </ul>
      </div>
      <div class="list" v-if="posterArr.length != 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div
            class="item"
            v-for="(item, index) in posterArr"
            :key="index"
            @click="$router.push(`/postDetail?id=${item.id}`)"
          >
            <div class="left">
              <img :src="$publicObj.urlImg(item.cover)" />
              <img
                src="../../assets/images/task/getMoney.png"
                alt=""
                class="money"
                v-show="item.type == 9 || item.type == 10"
              />
            </div>
            <div class="right">
              <span class="title">{{ item.title }}</span>
              <span class="p">{{ item.description }}</span>
              <div class="bottom">
                <span>转发:{{ item.share }}次</span>
                <span
                  @click.stop="
                    goDetail(
                      item.id,
                      item.cover,
                      item.title,
                      item.description,
                      item.share,
                      item.score,
                      item.gmtCreate.substring(0, 11)
                    )
                  "
                  >阅读:{{ item.score || 0 }}次</span
                >
                <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <van-empty
        description="当前暂无海报内容~"
        class="custom-image"
        :image="require('../../assets/dafault/nopost.png')"
        v-else
      >
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="goAdd"
          v-if="type != 1"
          >去新建海报</van-button
        >
      </van-empty>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posterArr: [], //海报列表
      page: 1, //当前页数,
      agentId: "",
      wxUserInfo: {}, //微信用户个人信息
      tabelType: 1,
      tasks: {}, //转发任务数量
      swiperArr: [], //轮播图
      isPower: 2,
      info: "",
      sortType: "",
      sort: "",
      type: 1,
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: "", //总页数
    };
  },

  async mounted() {
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));

    this.agentId = sessionStorage.getItem("agentId");

    // 获取个人信息
    await this.$store.dispatch("updateUserInfo");

    //获取轮播图数据
    await this.getPosterList();
    this.isCustomer();

    this.getswiperArr();
    this.getPromotionStatistics();
  },

  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.getPosterList();
      // 加载状态结束
      this.loading = false;
    },
    //点击跳转详情
    goDetail(id, cover, title, description, share, score, gmtCreate) {
      if (this.isPower == 3) return;
      let obj = {
        cover,
        title,
        description,
        share,
        score,
        gmtCreate,
      };
      sessionStorage.setItem("taskDetail", JSON.stringify(obj));
      this.$router.push(`/taskDetails?id=${id}&title=海报`);
    },
    // 切换
    setType(n) {
      this.type = n;
      this.getPosterList();
    },
    //去发布
    goPush() {
      if (this.isPower == 3 && this.info != " ") {
        return this.$router.push("/mineInstructions");
      } else if (this.isPower == 3 && this.info == " ") {
        return this.$toast("您的权限不足！");
      }
      this.$router.push("/publishPost?msg=2");
    },
    //去创建
    goAdd() {
      if (this.isPower == 3 && this.info != " ") {
        return this.$router.push("/mineInstructions");
      } else if (this.isPower == 3 && this.info == " ") {
        return this.$toast("您的权限不足！");
      }
      if (this.isPower) {
        this.$router.push({ path: "/addPoster" });
      }
    },
    //判断是否有权限创建
    async isCustomer() {
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: this.wxUserInfo.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
      this.info = res.info;
    },
    //获取海报任务列表
    async getPosterList() {
      let obj = {
        account: this.agentId,
        page: this.page,
        limit: this.limit,
        agentId: this.agentId,
        tabelType: 3,
        sortType: this.sortType, //排序
        sort: this.sort,
        status: 2,
      };
      if (this.type == 2 || this.type == 4) {
        obj.type = 9;
      } else if (this.type == 3) {
        obj.type = 8;
      } else {
        obj.type = 10;
      }
      let res = await this.$api.getPosterList(obj);
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.posterArr = res.data.list || [];
      } else {
        this.posterArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
    },
    //获取轮播图数据
    getswiperArr() {
      this.swiperArr = this.$store.state.userInfo.systemCoverList.map(
        (item) => {
          return { url: item.url, linkUrl: item.linkUrl };
        }
      );
    },
    // 推广数据统计
    async getPromotionStatistics() {
      let res = await this.$api.getPromotionStatistics({
        account: this.$store.state.userInfo.account,
        tableType: 3,
        status: 2,
      });
      if (res.code !== 0) return;
      this.tasks = res.data;
    },
  },
};
</script>

<style scoped lang="less">
/deep/.van-empty__image {
  width: 166px;
  height: 139px;
}

.bottom-button {
  width: 130px;
  height: 34px;
  background-color: #477fe6;
  border-radius: 17px;
  border: none;
  font-size: 13px;
  color: #ffffff;
}
main {
  padding: 0 15px;
  height: calc(100vh - 96px);
  padding-top: 46px;
  overflow-y: scroll;
  .my-swipe {
    height: 150px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 1px;
    margin: 20px 0 10px;
    img {
      width: 4px;
      height: 15px;
      margin-right: 5px;
    }
  }

  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .item {
      width: 110px;
      height: 63px;
      border-radius: 5px;
      color: #fff;
      border-radius: 10px;
      background: url("../../assets/images/detail/bg1.png") no-repeat;
      background-size: 100%;
      &:nth-of-type(2) {
        background: url("../../assets/images/detail/bg2.png") no-repeat;
        background-size: 100%;
      }
      &:nth-of-type(3) {
        background: url("../../assets/images/detail/bg3.png") no-repeat;
        background-size: 100%;
      }

      h4 {
        font-size: 11px;
        padding: 8px 0;
        text-align: center;
      }
      p {
        font-size: 19px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: 10px;
          font-weight: normal;
        }
      }
    }
  }
  .task {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 165px;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.16);

      img {
        width: 41px;
        height: 41px;
      }

      h4 {
        margin-left: 12px;
        font-size: 12px;
        font-weight: 700;
        color: #3b447a;
        letter-spacing: 1px;
      }
    }
  }
  .poster_type {
    border-top: 3px solid #f3f5f7;
    padding-top: 5px;
    background-color: #fff;
    ul {
      display: -webkit-flex;
      display: flex;
      justify-content: space-around;
      li {
        font-size: 12px;
        color: #666;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        padding: 5px 0;
        i {
          width: 28px;
          height: 3px;

          border-radius: 3px;
          position: absolute;
          bottom: -5px;
        }
      }
      .active {
        font-weight: 700;
        color: #0264d1;
        i {
          background-color: #0264d1;
        }
      }
    }
  }
  .list {
    .item {
      display: flex;
      margin-top: 12px;
      .left {
        width: 90px;
        height: 90px;
        margin-right: 15px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .money {
          width: 35px;
          height: 35px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: none;
        }
      }
      .right {
        flex: 1;

        span {
          font-size: 11px;
          color: #999999;
        }
        .title {
          margin-top: 5px;
          display: block;
          font-size: 14px;
          color: #333333;
        }
        .p {
          margin-top: 3px;
          height: 30px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
          span {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
